<template>
    <div class="charts-page container py-4">
        <h4 class="fw-semibold mb-4">账单图表</h4>

        <!-- 🔘 年月选择器 -->
        <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
            <!-- 年份下拉列表 -->
            <select v-model="selectedYear" class="form-select form-select-sm" style="width: auto"
                @change="fetchChartData">
                <option v-for="year in years" :key="year" :value="year">{{ year }} 年</option>
            </select>

            <!-- 月份下拉列表（空值代表全年） -->
            <select v-model="selectedMonth" class="form-select form-select-sm" style="width: auto"
                @change="fetchChartData">
                <option value="">全年</option>
                <option v-for="m in 12" :key="m" :value="m">{{ m }} 月</option>
            </select>
        </div>

        <!-- 📈 图表展示区域 -->
        <div class="chart-container">
            <canvas ref="chartRef"></canvas>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import dayjs from 'dayjs';
import Chart from 'chart.js/auto'; // Chart.js 自动加载依赖
dayjs.locale('zh-cn'); // 设置 dayjs 为中文
import { useApi } from '../composables/useApi'; // 自定义封装的 API hook
import { useToast } from '../composables/useToast'; // 自定义 toast hook

// toast 提示实例
const { error } = useToast();

// DOM ref：用于绑定 canvas 图表容器
const chartRef = ref(null);
// Chart.js 实例变量
let chartInstance = null;

// 🗓️ 当前年份和月份选择器绑定的值
const selectedYear = ref(dayjs().year());
// 修改默认月份为当前月份
const selectedMonth = ref(dayjs().month() + 1); // dayjs的月份是0-11，所以需要+1

// ✨ 最近 5 年构成的年份数组
const years = Array.from({ length: 5 }, (_, i) => dayjs().year() - i);

// 📡 使用封装的 useApi 获取图表数据，手动请求模式（manual: true）
const { result: chartData, fetchData } = useApi({
    url: '/transactions/chart/data',
    method: 'GET',
    manual: true,
    transform: res => res.data // 返回后直接取 .data
});

// 🔧 获取当前的查询参数（根据年月组合）
const getQueryParams = () => {
    const params = { year: selectedYear.value };
    if (selectedMonth.value) {
        params.month = selectedMonth.value;
    }
    return params;
};

// 🔁 主入口：请求数据后渲染图表
const fetchChartData = async () => {
    try {
        // 请求图表数据
        await fetchData({ params: getQueryParams() });
        // 渲染图表
        renderChart(chartData.value || []);
    } catch (e) {
        error(`图表数据加载失败: ${e.message || '未知错误'}`);
        console.error('图表数据加载失败:', e);
    }
};

// 📊 渲染图表函数（Chart.js）
const renderChart = data => {
    // 如果 DOM 尚未准备好，直接返回
    if (!chartRef.value) return;

    // 如果已有旧图表，先销毁
    if (chartInstance) {
        chartInstance.destroy();
    }

    // 准备图表数据
    const labels = []; // 横坐标标签（x 轴）
    const revenue = []; // 收入数据
    const expenditure = []; // 支出数据

    // 📆 如果是查看全年（按月显示）
    if (!selectedMonth.value) {
        // 使用dayjs动态生成月份标签
        for (let m = 0; m < 12; m++) {
            labels.push(dayjs().month(m).format('M月'));
            const found = data.find(item => item.month === m + 1);
            revenue.push(found?.revenue || 0);
            expenditure.push(found?.expenditure || 0);
        }
    } else {
        // 📅 否则按天显示（某月的每天）
        data.forEach(item => {
            labels.push(dayjs(item.date).format('MM-DD')); // 格式化日期如 06-29
            revenue.push(item.revenue);
            expenditure.push(item.expenditure);
        });
    }

    // 💡 初始化 Chart.js 横向柱状图
    chartInstance = new Chart(chartRef.value, {
        type: 'bar', // 改为横向柱状图
        data: {
            labels,
            datasets: [
                {
                    label: '收入',
                    data: revenue,
                    backgroundColor: '#28a745', // 绿色
                    borderColor: '#28a745',
                    borderWidth: 1
                },
                {
                    label: '支出',
                    data: expenditure,
                    backgroundColor: '#dc3545', // 红色
                    borderColor: '#dc3545',
                    borderWidth: 1
                }
            ]
        },
        options: {
            indexAxis: 'y', // 横向柱状图的关键配置
            responsive: true, // 自适应屏幕宽度
            maintainAspectRatio: false, // 不强制比例
            plugins: {
                tooltip: {
                    mode: 'index',
                    intersect: false
                },
                legend: {
                    position: 'top'
                }
            },
            scales: {
                x: {
                    beginAtZero: true // x轴从 0 开始
                },
                y: {
                    // 可以添加更多配置来优化移动端显示
                }
            }
        }
    });
};

// 🚀 页面初始化后拉取数据
onMounted(fetchChartData);
</script>

<style scoped>
.charts-page {
    max-width: 1300px;
    margin: 0 auto;
}

.chart-container {
    position: relative;
    height: 500px;
    width: 100%;
}

canvas {
    width: 100%;
    height: 100%;
}
</style>